<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form div {
            height: 40px;
            line-height: 40px;
        }
        
        form div:nth-child(4) {
            height: auto;
        }
        
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
        
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            <div>
                <span>用户名：</span>
                <span>
          <input type="text" v-model='usename'> 
        </span>
                <span class="error" v-show='usenameErr'>
          用户名至少要6位
        </span>
            </div>
            <div>
                <span>密码：</span>
                <span>
            <input type="password" v-model='pwd'>
          </span>
                <span class="error" v-show='pwdErr'>
              密码至少要8位
            </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
                <span class="error" v-show='genderErr'>
          必须要选择性别
        </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="0" v-model='hobby'>
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="1" v-model='hobby'>
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="2" v-model='hobby'>
                <label for="code">写代码</label>
                <span class="error" v-show='hobbyErr'>
          爱好必须选择2项以上
        </span>
            </div>
            <div>
                <span>职业：</span>
                <select v-model='job'>
          <option value="0">教师</option>
          <option value="1">软件工程师</option>
          <option value="2">律师</option>
        </select>
                <span class="error" v-show='jobErr'>
          必须要选择职业
        </span>
            </div>
            <div>
                <input type="button" value="注册" @click='login'>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 要求: 对各种表单元素进行双向数据绑定
        // 默认情况下, 错误信息都不显示.
        // 在点击注册按钮的时候, 根据表单中的数据, 显示出对应的错误信息
        var vm = new Vue({
            el: '#app',
            data: {
                usename: '',
                pwd: '',
                gender: '',
                hobby: [],
                job: '',
                usenameErr: false,
                pwdErr: false,
                genderErr: false,
                hobbyErr: false,
                jobErr: false,

            },
            methods: {
                login: function() {
                    if (this.usename.length < 6) {
                        this.usenameErr = true
                    }
                    if (this.pwd.length < 8) {
                        this.pwdErr = true
                    }
                    if (this.gender.length == 0) {
                        this.genderErr = true
                    }
                    if (this.hobby.length < 2) {
                        this.hobbyErr = true
                    }
                    if (this.job.length == 0) {
                        this.jobErr = true
                    }
                }
            }
        });
    </script>
</body>

</html>